<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili5</title>
    <link rel="stylesheet" href="./all.css">
    <script src="../font/iconfont.js"></script>

    <style>
        html {
            font-size: 62.5%;
        }

        body {
            margin-top: 24rem;
            background-color: rgb(241, 242, 244);
            position: relative;
        }

        .photo {
            width: 100%;
            height: 20rem;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 9;
        }

        .nav {
            width: 100%;
            height: 3.8rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            box-shadow: 0 .5rem 1rem rgb(241, 242, 244);
            background-color: #fff;
            position: fixed;
            left: 0;
            top: 20rem;
            z-index: 9;
        }

        .nav>li {
            width: 27%;
        }

        .nav p {
            font-size: 1.5rem;
            color: rgb(117, 117, 117);
            text-align: center;
            letter-spacing: .1rem;
        }

        .nav li:nth-of-type(1) p {
            color: rgb(253, 102, 153);
        }

        .nav>li:nth-of-type(3) {
            padding-right: 1rem;
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .nav>li:nth-of-type(3) div:nth-of-type(1) {
            width: 10rem;
            height: 3rem;
            background-color: rgb(241, 242, 244);
            box-shadow: 0 .1rem .2rem #ccc,
                0 -.1rem .2rem #ccc;
            border-radius: 2rem 0 0 2rem;

            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav>li:nth-of-type(3) input {
            width: 7rem;
            height: 2.8rem;
            border: none;
            outline: none;
            background-color: rgb(241, 242, 244);
        }

        input::-webkit-input-placeholder {
            color: rgb(191, 193, 192);
            font-size: 1.3rem;
            letter-spacing: .1rem;
        }

        .nav>li:nth-of-type(3) div:nth-of-type(2) {
            height: 3rem;
            width: 3.6rem;
            background-color: #fff;
            box-shadow: 0 .1rem .2rem #ccc,
                0 -.1rem .2rem #ccc;
            border-radius: 0 2rem 2rem 0;

            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: .8rem;
        }

        .nav>li:nth-of-type(3) div:nth-of-type(2)>svg {
            font-size: 2.5rem;
            color: rgb(117, 117, 117);
            background-color: #fff;
        }

        .border {
            width: 3.4rem;
            height: .2rem;
            background-color: rgb(253, 102, 153);
            position: absolute;
            left: 3.2rem;
            bottom: 0;
        }

        .mode-head-photo {
            height: 6.5rem;
            background-color: #fff;
            display: flex;
            align-items: center;
        }

        .mode-head-photo>img {
            width: 4rem;
            height: 4rem;
            border-radius: 4rem;
            margin: 0 1.5rem 0 1rem;
        }

        .mode-head-photo>div:nth-of-type(1) {
            flex-grow: 1;
            width: 50%;
        }

        .mode-head-photo>div:nth-of-type(2) {
            width: 8rem;
            height: 2.9rem;
            margin-right: 1.5rem;
            background-color: rgb(228, 229, 231);
            border-radius: .2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .5s;
        }

        .mode-head-photo>div:nth-of-type(1) p {
            font-size: 1.6rem;
            letter-spacing: .1rem;
        }

        .mode-head-photo>div:nth-of-type(1) span {
            font-size: 1.2rem;
            letter-spacing: .1rem;
            color: rgb(117, 117, 117);
            margin-right: .5rem;
        }

        .mode-head-photo svg {
            font-size: 1.5rem;
            color: rgb(117, 117, 117);
            margin-right: .5rem;
        }

        .mode-head-photo svg+p {
            font-size: 1.4rem;
            line-height: 1.4rem;
            color: rgb(117, 117, 117);
            letter-spacing: .1rem;
        }

        .mode-text {
            background-color: #fff;
        }

        .text {
            display: flex;
            align-items: flex-start;
        }

        .title {
            font-size: 1.6rem;
            letter-spacing: .1rem;
            font-weight: bold;
            flex-grow: 1;
            margin-left: 1rem;
            line-height: 2.6rem;
            height: 2.6rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .text svg {
            width: 20%;
            font-size: 2rem;
            color: rgb(117, 117, 117);
            margin-right: .5rem;
            margin-top: .5rem;
        }

        .tb-list {
            display: flex;
            align-items: center;
            line-height: 3.5rem;
            color: rgb(117, 117, 117);
            margin-left: 1rem;
        }

        .tb-list>li {
            height: 3rem;
            font-size: 1.2rem;
            margin-right: .7rem;
            line-height: 3rem;
            display: flex;
            align-items: center;
        }

        .tb-list>li:nth-of-type(3) {
            flex-grow: 1;
            margin-left: .4rem;
        }

        .tb-list svg {
            font-size: 1.8rem;
            margin-right: .4rem;
        }

        .warn {
            overflow: hidden;
            color: rgb(117, 117, 117);
        }

        .warn>p {
            font-size: 1.2rem;
            margin-left: 1rem;
            margin-bottom: .8rem;
            float: left;
        }

        .lit-text {
            font-size: 1.2rem;
            color: rgb(117, 117, 117);
            margin-left: 1rem;
            letter-spacing: .1rem;
        }

        .hid {
            display: none;

        }

        .clicked {
            display: block;
        }

        .length {
            height: 5.2rem;
            white-space: normal;
        }

        .rotate {
            transform: rotateZ(180deg);
        }

        .good {
            height: 6.3rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: #fff;
            border-bottom: .1rem solid rgb(191, 193, 192);
        }

        .good svg {
            width: 100%;
            font-size: 2.6rem;
            margin-bottom: .5rem;
        }

        .pink {
            color: rgb(253, 102, 153);
        }

        .good>li {
            font-size: 1rem;
            color: rgb(117, 117, 117);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .bg {
            background-color: #fff;
            height: 9.6rem;
            display: flex;
            align-items: center;
            justify-content: end;

        }

        .wrapper {
            width: 97%;
            display: flex;
            align-items: center;
            height: 97%;
            border-bottom: .1rem solid #ccc;
        }

        .wrapper>div:first-child {
            position: relative;
        }

        .wrapper img {
            width: 14.1rem;
            height: 7.8rem;
            border-radius: .5rem;
        }

        .time {
            width: 3.6rem;
            height: 1.6rem;
            font-size: 1.1rem;
            color: #fff;
            line-height: 1.6rem;
            background-color: rgba(0, 0, 0, .5);
            border-radius: .3rem;
            text-align: center;
            position: absolute;
            right: .5rem;
            bottom: .6rem;
        }

        .content {
            flex-grow: 1;
            margin-left: .7rem;
            margin-right: .4rem;
            color: rgb(117, 117, 117);
        }

        .tar {
            height: 4.1rem;
            font-size: 1.4rem;
            letter-spacing: .1rem;
            color: #000;
            line-height: 2rem;
            overflow: hidden;
            margin-left: .2rem;

        }

        .up {
            display: flex;
            align-items: center;
        }

        .up svg {
            font-size: 1.6rem;
            margin-left: .2rem;
        }

        .up p {
            height: 1.8rem;
            margin-left: .3rem;
            font-size: 1.1rem;

            line-height: 1.8rem;
            letter-spacing: .07rem;
        }

        .play {
            display: flex;
            align-items: center;
            margin-top: .2rem;
            width: 100%;
        }

        .play svg {
            height: 1.6rem;
            font-size: 2rem;
        }

        .play>li {
            display: flex;
            align-items: center;
        }

        .play>li:nth-of-type(1) {
            width: 36%;
        }

        .play>li:nth-of-type(2) {
            flex-grow: 1;
        }

        .play>li:nth-of-type(3)>svg {
            font-size: 1.3rem;
        }

        .play>li>p {
            height: 1.6rem;
            font-size: 1.2rem;
            line-height: 1.7rem;
            margin-left: .1rem;
        }

        .hid-list {
            width: 100%;
            height: 4rem;
            background-color: #000;
            display: flex;
            align-items: center;
            z-index: 1;
            transition: all .2s;
        }

        .hid-list svg {
            color: #fff;
            font-size: 2rem;
            margin: 0 1rem;
        }

        .hid-list-t a:first-child>svg {
            margin-right: 22.5rem;
        }

        .hid-list-t a:last-child>svg {
            font-size: 1.5rem;
        }

        .hid-list-t {
            position: fixed;
            left: 0;
            top: 0rem;
            background: linear-gradient(rgba(0,0,0,.3), rgba(255, 255, 255, .0));
        }

        .hid-list-b {
            justify-content: space-between;
            position: fixed;
            left: 0;
            top: 16rem;
            background: linear-gradient(rgba(255, 255, 255, .0),rgba(0, 0, 0, .5));
        }

        .zindex {
            z-index: 10;
        }

        .nav+div .follow {
            background-color: rgb(253, 102, 153);
        }

        .nav+div .follow>p:nth-of-type(1) {
            display: none;

        }

        .mode-head-photo>div:nth-of-type(2)>svg:nth-of-type(2) {
            display: none;
        }

        .nav+div .follow>svg:nth-of-type(1) {
            display: none;
        }

        .nav+div .follow>svg:nth-of-type(2) {
            display: block;
            color: #fff;
            font-size: 1.3rem;
        }

        .mode-head-photo>div:nth-of-type(2)>p:nth-of-type(2) {
            display: none;
        }

        .nav+div .follow>p:nth-of-type(2) {
            font-size: 1.4rem;
            display: block;

            color: #fff;
            line-height: 2rem;
            letter-spacing: .2rem;
        }
    </style>
</head>

<body>
    <div class="hid-list hid-list-t">
        <a href="./bilibili2.html">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiangzuojiantou"></use>
            </svg>
        </a>
        <a href="">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shiyongxiaochuangbofang"></use>
            </svg>
        </a>
        <a href="">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-023-cctv-1"></use>
            </svg>
        </a>
        <a href="">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gengduo1"></use>
            </svg>
        </a>
    </div>
    <img src="../img/bilibili2/哥俩美食shipin.jpg" alt="" class="photo">
    <div class="hid-list hid-list-b">
        <a href="">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bofang1"></use>
            </svg>
        </a>
        <a href="">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-quanpingmu"></use>
            </svg>
        </a>

    </div>
    <ul class="nav">
        <li>
            <div class="border"></div>
            <p>简介</p>
        </li>
        <li>
            <p>评论206</p>
        </li>
        <li>
            <div>
                <input type="text" placeholder="点我发弹幕">
            </div>
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofangqi-danmukai"></use>
                </svg>
            </div>
        </li>
    </ul>
    <div class="mode-head-photo">
        <img src="../img/bilibili2/哥俩美食.jpg" alt="">
        <div>
            <p>哥俩美食</p>
            <span>13.3万粉丝</span> <span>209视频</span>
        </div>
        <div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-row-full"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jia"></use>
            </svg>

            <p>已关注</p>
            <p>关注</p>
        </div>
    </div>


    <div class="mode-text">
        <div class="text">
            <p class="title">外卖小哥干到很晚才回家饿坏了，吃三个鸡肉卷再来一碗酸辣粉，过瘾</p>
            <svg class="icon" aria-hidden="true" id="jian">
                <use xlink:href="#icon-xialajiantouxiao"></use>
            </svg>
        </div>
        <ul class="tb-list">
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofangshu"></use>
                </svg>
                8.8万
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-pinglun2"></use>
                </svg>
                382
            </li>
            <li>
                11-9
            </li>
        </ul>
        <div class="hid warn">
            <p>BV18L4y1q7XE</p>
            <p>未经作者19001010112杨博文授权禁止转载</p>
        </div>
        <p class="hid lit-text">外卖小哥干到很晚才回家饿坏了，吃三个鸡肉卷再来一碗酸辣粉，过瘾</p>
    </div>

    <ul class="good">
        <li>
            <svg class="icon pink" aria-hidden="true">
                <use xlink:href="#icon-dianzan"></use>
            </svg>
            <p>5860</p>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-unlike-fill"></use>
            </svg>
            <p>不喜欢</p>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jinbi"></use>
            </svg>
            <p>1428</p>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xingxing"></use>
            </svg>
            <p>262</p>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhuanfa00"></use>
            </svg>
            <p>48</p>
        </li>
    </ul>

    <div class="related_video">
        <!-- 推荐视频列表 JSON -->

    </div>


    <script>
        var div = document.getElementsByClassName("mode-text")[0];
        var textbox = div.getElementsByClassName("text");
        var hid = div.getElementsByClassName("hid");
        var title = div.getElementsByClassName("title");
        var svg = div.querySelector("svg");

        textbox[0].onclick = function () {
            hid[0].classList.toggle("clicked");
            hid[1].classList.toggle("clicked");
            svg.classList.toggle("rotate");
            title[0].classList.toggle("length");
        }


        var list = document.querySelectorAll(".hid-list");
        var photo = document.querySelector(".photo");

        photo.onclick = function () {
            list[0].classList.toggle("zindex");
            list[1].classList.toggle("zindex");

        }

        var follow = document.querySelector(".mode-head-photo>div:nth-of-type(2)");
        console.log(follow);
        follow.onclick = function () {
            follow.classList.toggle("follow");
        }

        //json
        var rv = document.querySelector(".related_video");

        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //xmlhttp.responseText;
                //你的ajax代码写在这里，其他位置除了open的前两个参数都不需要也不要改变。
                //ajax加载成功之后的代码执行位置
                var data = JSON.parse(xmlhttp.responseText);
                data.forEach(function (v, i) {
                    var nediv = document.createElement("div");
                    nediv.className = "bg";
                    nediv.innerHTML = `
                <div class="wrapper">
                    <div>
                        <img src="${v.img}" alt="${v.alt}">
                        <div class="time">${v.time}</div>
                    </div>
                    <div class="content">
                        <p class="tar">${v.alt}</p>

                        <div class="up">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-UPzhu"></use>
                            </svg>
                            <p>${v.upname}</p>
                        </div>

                        <ul class="play">
                            <li>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-bofangshu"></use>
                                </svg>
                                <p>${v.zan}</p>
                            </li>
                            <li>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-pinglun2"></use>
                                </svg>
                                <p>${v.comment}</p>
                            </li>
                            <li>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-gengduo1"></use>
                                </svg>
                            </li>
                        </ul>
                    </div>
                </div>`;
                    rv.appendChild(nediv);

                });
                //只有用http的方式查看网页的运行结果才可以避免用本地网页的方式查看ajax运行结果。
                //vs code中可以使用liver server，post请求用专业的HTTP服务器
            }
        }
        xmlhttp.open("GET", "http://rap2api.taobao.org/app/mock/295104/FQ/bilibili5", true);
        xmlhttp.send();
    </script>
</body>

</html>